<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/login.css">
</head>
<body>
        
       <!-- 抬头 -->
    
       <div class="bittle-cen">
        <!--头部导航 -->
            <div class="bittle">
                <div class="bittle-pic fl">
                    <img src="../img/moguji.png" alt="huawei">
                </div>
                <div class="bittle-name fl">
                    <span>|</span>
                    <p>某街商城</p>
                </div>
            </div>
          <div class="bittle-big">
          </div>

      </div>
    <div class="bittle-big2"></div>      

            <!-- 中部 -->
          <div class="center">
            <div class="center-cen">
                <p class="center-tit">某街账号登录</p>
                <div class="centerr ">
                  <div  class="center-lef ">
                    <div class="center-lefpic">
                        <img src="../img/login-download.png" alt="二维码">
                    </div>   
                    <p class="center-lefpre">若您使用华为手机，请进入“设置”>“华为帐号”扫码登录。</p>
                  </div>

                  <div class="res">
                    <div class="form-group">
                        <label for="username" class="tip1">用户名</label>
                        <div class="tip2">
                          <input type="text" name="userName" class="tip3"  placeholder="用户名">
                          <!-- <span name="nameSpan" class="spanspan"></span> -->
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="password" class="tip1">密码</label>
                        <div class="tip2">
                          <!-- <input type="password" name="pwd1" class="tip3"  placeholder="密码"> -->
                          <input type="password" name="userPwd" class="tip3" id="password" placeholder="密码">
                          <!-- <span name="pwdSpan" class="spanspan"></span> -->
                        </div>
                      </div>

                      <!-- <div class="form-group">
                        <label for="password" class="tip1">验证码</label>
                        <div class="tip2">
                          <input type="text" class="tip3" id="ac" placeholder="验证码"> <a id="sc"></a><br>
                          <span name="vcSpan" class="spanspan"></span>
                        </div>
                      </div> -->

                      <div class="form-group">
                        <div class="">
                          <!-- <button name="res" class="tip4">登录</button> -->
                          <button type="submit"  class="tip4">登录</button>
                        </div>
                      </div>

                      <div  class="form-group ques">
                        <ul>
                          <li><a href="../html/res.html">注册</a><span>|</span></li>
                          <li><a href="#">忘记密码</a><span>|</span></li>
                          <li><a href="../html/index.html">退出登录</a></li>
                        </ul>
                      </div>
                      <h2></h2>
                  </div> 

                </div>
                
                
                    
            </div>
          </div>
         


            <!-- 底部 -->
          <div class="bottom">
            <div class="bottom-cen">
              <div class="bottom-cenn">
                <ul>
                    <li class="bottom-li"><a href="#"> 某街账户协议</a></li>
                    <li class="bottom-li"><a href="#"> 某街账户协议</a></li>
                    <li class="bottom-li"><a href="#"> 某街账户协议</a></li>
                    <li class="bottom-li"><a href="#"> 某街账户协议</a></li>

                </ul>
            </div>
          </div>
            

          </div> 


            <script src="../js/jquery.min.js"></script>
            <script src="../js/cookie.js"></script>
            <script src="../js/tools.js"></script>
            <script>
              // 1, 获取 localStorage 中的 login
              // 如果 没有 login 这个键名 获取的结果是 null
              // 如果   有 login 这个键名 获取的结果是 json字符串
              let str = localStorage.getItem( 'login' );
              // console.log(str)
              // 当 获取结果 不是 null 有内容的时候,写入账号密码
              if(str !== null){ 
                const obj = JSON.parse( str );
                // 将对象中 存储的数据 写入 两个input标签
                $('[name="userName"]').val( obj.userName );
                $('[name="userPwd"]').val( obj.userPwd );
              }
        
              // 2, 给 登录添加添加点击事件
              $('.tip4').click(function(){
        
                // 获取两个 input标签的数据
                // 要做 账号 密码 格式长度内容的验证
        
                // 向 后端PHP文件发送请求
                $.ajax({
                  url: '../server/goods_login.php',
                  type: 'post',
                  data: {userName: $('[name="userName"]').val(), userPwd: $('[name="userPwd"]').val()},
                  dataType: 'json',
                  success: res=>{
                    if(res.result === 1){
                      // 登录成功
                      // 1, 获取当前页面 url地址栏中的数据信息
                      const urlObj = getUrlVal();
                      console.log( urlObj)
                      // 登录成功的提示信息
                      $('h2').html('登录成功,5秒后跳转跳转至首页');
        
                      // 设定cookie
                      // mySetCookie( 'login' , 1 , 7*24*60*60 , '/' );
                      mySetCookie( 'login' , 1 , '/' )
                      window.alert('欢迎您登录')
                      // 5秒跳转效果
                      let time = 5;
                      setInterval(() => {
                        // console.log(111);
                        time--;
                        if(time === 0){
                          // 根据来的页面携带的参数 跳转回 来的时候的页面
                          // window.location.href = `${urlObj.url}`;
        
                          window.location.href=`./index.html${location.search}`;
                          // 如果确定是 一个窗口 只跳转了一次 可以使用历史记录
                          // window.history.back();
                          // window.history.go(-1);
        
                          return false;
                        }
        
                        $('h2').html(`登录成功,${time}秒后跳转至首页`);
        
                      }, 1000);
                      console.log(res);
                    }
                   
                    if(res.result === 0){
                      // 登录失败
                      $('h2').html(`账号或者密码 不匹配 登录失败`);
                    }
                  }
                })
        
                // 阻止默认事件的执行
                return false;
        
        
              })
        
            </script>
                
                  
     
</body>
</html>